<script setup>
import { ref } from 'vue'
import { getSystemInfo } from '@/utils/systemInfo.js'
import { onLoad, onShow } from '@dcloudio/uni-app'

// 头部导航栏高度
const navigationBarHeight = ref(0)
// 状态栏高度
const statusBarHeight = ref(0)
// 头部导航栏总高度
const navTotalHeight = ref(0)

// 需要进行识图的图片
const imageUrl = ref('')

// 图片识别出的结果列表
const recognizeResult = ref([])

// 跳转AI助手页面
const onClickChat = () => {
	uni.navigateTo({
		url: '/ComprehensivePackage/AIChat/AIChat'
	})
}

// 点击识图调用函数
const onClickImage = async () => {
	await uni.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'],
		success: async (res) => {
			imageUrl.value = res.tempFilePaths[0]
			if (!imageUrl.value) {
				return
			}

			let uploadRes = ''

			await uni.uploadFile({
				url: 'https://www.u2051641.nyat.app:64347/ai/image',
				filePath: imageUrl.value,
				name: 'image',
				success: (res) => {
					uploadRes = JSON.parse(res.data)

					if (uploadRes) {
						recognizeResult.value = uploadRes.data
					}
				},
				fail: (err) => {
					console.log(err)
				}
			})
		},
		fail: (err) => {
			console.log(err)
		}
	})
}

// 点击识图结果跳转搜索页面
const onClickItem = (item) => {
	uni.navigateTo({
		url: `/ExplorePackage/Search/Search?keyword=${item.keyword}`
	})
}

// 获取设备信息
const SystemInfo = async () => {
	const res = await getSystemInfo()

	// 微信小程序平台
	// #ifdef MP-WEIXIN
	navigationBarHeight.value = res.navHeight
	statusBarHeight.value = res.statusBarHeight
	navTotalHeight.value = res.navTotalHeight
	// #endif
}

onLoad(() => {
	SystemInfo()
})

onShow(() => {
	if (recognizeResult.value.length > 0) {
		recognizeResult.value = []
	}
})
</script>

<template>
	<view class="container">
		<view class="navbar" :style="{ paddingTop: statusBarHeight + 'rpx', height: navTotalHeight + 'rpx' }">AI</view>

		<view class="content">
			<view class="chat" @tap="onClickChat">
				<view class="title">乐小游AI助手</view>
				<view class="icon">
					<text class="iconfont icon-chat_gpt"></text>
				</view>
			</view>

			<view class="scan">
				<view class="scan-top" @tap="onClickImage">
					<view class="title">AI智能识图</view>
					<view class="icon">
						<text class="iconfont icon-zhinengshitu"></text>
					</view>
				</view>

				<!-- 识图结果列表 -->
				<view class="result" v-if="recognizeResult.length > 0">
					<view class="result-top">为您识别到以下结果</view>
					<view class="result-bottom">
						<view class="result-item" v-for="(item, index) in recognizeResult" :key="index" @tap="onClickItem(item)">
							{{ item.keyword }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.container {
	height: 100vh;
	background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);

	.navbar {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	@mixin box-style {
		background-color: #c5ddd3;
		width: 90%;
		padding: 20rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	@mixin title-style {
		font-size: 40rpx;
		font-weight: bold;
		color: #6f7692;
	}

	@mixin icon-style {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin: 30rpx 0;
		background-color: #1ea380;
		display: flex;
		justify-content: center;
		align-items: center;

		.iconfont {
			font-size: 70rpx;
			color: #c4ddd3;
		}
	}

	.content {
		padding: 100rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

		.chat {
			@include box-style;
			@include title-style;
			margin-bottom: 50rpx;
			.icon {
				@include icon-style;
			}
		}

		.scan {
			@include box-style;
			@include title-style;

			.scan-top {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.icon {
				@include icon-style;
			}

			.result {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.result-top {
					font-size: 30rpx;
					margin-bottom: 50rpx;
				}

				.result-bottom {
					display: grid;
					grid-template-rows: repeat(2, 1fr);
					grid-template-columns: repeat(3, 1fr);
					gap: 20rpx;
					font-size: 28rpx;

					.result-item {
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 20rpx;
						background-color: #28a380;
						color: #fff;
						border-radius: 30rpx;
					}
				}
			}
		}
	}
}
</style>
